<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
<meta charset="utf-8">
<title>微信JS-SDK Demo</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=0">
<link rel="stylesheet" href="http://wx.wiz-tech.com.cn/css/style.css">
</head>
<body ontouchstart="">
	
<div class="wxapi_container">
    <div class="wxapi_index_container">
      <ul class="label_box lbox_close wxapi_index_list">
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基础接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">图像接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音频接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智能接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">设备信息接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">界面操作接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信扫一扫接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券接口</a></li>
        <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付接口</a></li>
      </ul>
    </div>
    <div class="lbox_close wxapi_form">
      <h3 id="menu-basic">基础接口</h3>
      <span class="desc">判断当前客户端是否支持指定JS接口</span>
      <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>
      <button class="btn btn_primary" onclick="weixinShareTimeline('爱情贺卡','山无陵，天地合，乃敢与君绝。','http://api100.duapp.com/card/','http://bcs.duapp.com/api100/image/logo/lover.jpg')">weixinShareTimeline</button>

      <h3 id="menu-share">分享接口</h3>
      <span class="desc">获取“分享到朋友圈”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button>
      <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>
      <span class="desc">获取“分享到QQ”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button>
      <span class="desc">获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口</span>
      <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button>

      <h3 id="menu-image">图像接口</h3>
      <span class="desc">拍照或从手机相册中选图接口</span>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button>
      <span class="desc">预览图片接口</span>
      <button class="btn btn_primary" id="previewImage">previewImage</button>
      <span class="desc">上传图片接口</span>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button>
      <span class="desc">下载图片接口</span>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button>

      <h3 id="menu-voice">音频接口</h3>
      <span class="desc">开始录音接口</span>
      <button class="btn btn_primary" id="startRecord">startRecord</button>
      <span class="desc">停止录音接口</span>
      <button class="btn btn_primary" id="stopRecord">stopRecord</button>
      <span class="desc">播放语音接口</span>
      <button class="btn btn_primary" id="playVoice">playVoice</button>
      <span class="desc">暂停播放接口</span>
      <button class="btn btn_primary" id="pauseVoice">pauseVoice</button>
      <span class="desc">停止播放接口</span>
      <button class="btn btn_primary" id="stopVoice">stopVoice</button>
      <span class="desc">上传语音接口</span>
      <button class="btn btn_primary" id="uploadVoice">uploadVoice</button>
      <span class="desc">下载语音接口</span>
      <button class="btn btn_primary" id="downloadVoice">downloadVoice</button>

      <h3 id="menu-smart">智能接口</h3>
      <span class="desc">识别音频并返回识别结果接口</span>
      <button class="btn btn_primary" id="translateVoice">translateVoice</button>

      <h3 id="menu-device">设备信息接口</h3>
      <span class="desc">获取网络状态接口</span>
      <button class="btn btn_primary" id="getNetworkType">getNetworkType</button>

      <h3 id="menu-location">地理位置接口</h3>
      <span class="desc">使用微信内置地图查看位置接口</span>
      <button class="btn btn_primary" id="openLocation" onclick="openLocation()">openLocation</button>
      <span class="desc">获取地理位置接口</span>
      <button class="btn btn_primary" id="getLocation">getLocation</button>

      <h3 id="menu-webview">界面操作接口</h3>
      <span class="desc">隐藏右上角菜单接口</span>
      <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button>
      <span class="desc">显示右上角菜单接口</span>
      <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button>
      <span class="desc">关闭当前网页窗口接口</span>
      <button class="btn btn_primary" id="closeWindow">closeWindow</button>
      <span class="desc">批量隐藏功能按钮接口</span>
      <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button>
      <span class="desc">批量显示功能按钮接口</span>
      <button class="btn btn_primary" id="showMenuItems">showMenuItems</button>
      <span class="desc">隐藏所有非基础按钮接口</span>
      <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button>
      <span class="desc">显示所有功能按钮接口</span>
      <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button>

      <h3 id="menu-scan">微信扫一扫</h3>
      <span class="desc">调起微信扫一扫接口</span>
      <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信处理结果)</button>
      <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回结果)</button>

      <h3 id="menu-shopping">微信小店接口</h3>
      <span class="desc">跳转微信商品页接口</span>
      <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>

      <h3 id="menu-card">微信卡券接口</h3>
      <span class="desc">批量添加卡券接口</span>
      <button class="btn btn_primary" id="addCard">addCard</button>
      <span class="desc">调起适用于门店的卡券列表并获取用户选择列表</span>
      <button class="btn btn_primary" id="chooseCard">chooseCard</button>
      <span class="desc">查看微信卡包中的卡券接口</span>
      <button class="btn btn_primary" id="openCard">openCard</button>

      <h3 id="menu-pay">微信支付接口</h3>
      <span class="desc">发起一个微信支付请求</span>
      <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button>
    </div>
  </div>
	<input type="text" id="timestamp" value="${map['timestamp']}"/>
	<input type="text" id="nonceStr" value="${map['nonceStr']}"/>
	<input type="text" id="signature" value="${map['signature']}"/>
	<input type="text" id="appId" value="${map['appid']}"/>
	<input type="text" id="code" value="${map['code']}"/>
	<input type="text" id="openid" value="${map['openid']}"/>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="http://wx.wiz-tech.com.cn/js/jquery-1.7.2.js" type="text/javascript"> </script>
<script>
var timestamp = $("#timestamp").val();//时间戳
var nonceStr = $("#nonceStr").val();//随机串
var signature = $("#signature").val();//签名
var appId = $("#appId").val();//签名
var code = $("#code").val();//签名
var openid = $("#openid").val();//签名
  wx.config({
	  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	  appId: appId, // 必填，公众号的唯一标识
	  timestamp: timestamp, // 必填，生成签名的时间戳
	  nonceStr: nonceStr, // 必填，生成签名的随机串
	  signature: signature,// 必填，签名，见附录1
	  jsApiList: [ 'checkJsApi',
	               'onMenuShareTimeline',
	               'onMenuShareAppMessage',
	               'onMenuShareQQ',
	               'onMenuShareWeibo',
	               'onMenuShareQZone',
	               'hideMenuItems',
	               'showMenuItems',
	               'hideAllNonBaseMenuItem',
	               'showAllNonBaseMenuItem',
	               'translateVoice',
	               'startRecord',
	               'stopRecord',
	               'onVoiceRecordEnd',
	               'playVoice',
	               'onVoicePlayEnd',
	               'pauseVoice',
	               'stopVoice',
	               'uploadVoice',
	               'downloadVoice',
	               'chooseImage',
	               'previewImage',
	               'uploadImage',
	               'downloadImage',
	               'getNetworkType',
	               'openLocation',
	               'getLocation',
	               'hideOptionMenu',
	               'showOptionMenu',
	               'closeWindow',
	               'scanQRCode',
	               'chooseWXPay',
	               'openProductSpecificView',
	               'addCard',
	               'chooseCard',
	               'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  
</script>
 <script type="text/javascript">
 function weixinShareTimeline(title,desc,link,imgUrl){ 
	    WeixinJSBridge.invoke('shareTimeline',{ 
	        "img_url":imgUrl, 
	        //"img_width":"640", 
	        //"img_height":"640", 
	        "link":link, 
	        "desc": desc, 
	        "title":title 
	    });  
	}
            document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                // 发送给好友
                WeixinJSBridge.on('menu:share:appmessage', function (argv) {
                    WeixinJSBridge.invoke('sendAppMessage', {
                        "appid": "123",
                        "img_url": "http://bcs.duapp.com/api100/image/logo/lover.jpg",
                        "img_width": "160",
                        "img_height": "160",
                        "link": "http://api100.duapp.com/card/",
                        "desc":  "山无陵，天地合，乃敢与君绝。",
                        "title": "爱情贺卡"
                    }, function (res) {
                        _report('send_msg', res.err_msg);
                    })
                });

                // 分享到朋友圈
                WeixinJSBridge.on('menu:share:timeline', function (argv) {
                    WeixinJSBridge.invoke('shareTimeline', {
                        "img_url": "http://bcs.duapp.com/api100/image/logo/newyear.jpg",
                        "img_width": "160",
                        "img_height": "160",
                        "link": "http://api100.duapp.com/card/",
                        "desc":  "Best wishes for a wonderful new year.",
                        "title": "新年贺卡"
                    }, function (res) {
                        _report('timeline', res.err_msg);
                    });
                });
            }, false)
        </script>
<%-- <script src="${pageContext.request.contextPath}/js/demo.js"> </script> --%>
</html>